<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dashboard</title>
<link rel="stylesheet" href="../../../css/Semantic-UI-CSS-master/semantic.min.css"/>
		<link rel="stylesheet" href="../../../js/layui/css/layui.css" media="all">
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
		<script src="../../../js/vue/vue.js"></script>
		<script src="../../../js/vue/axios.min.js"></script>
		<script src="../../../js/layui/layui.js" charset="utf-8"></script>
		<script src="../../../js/echarts.min.js"></script>
		<style>
			
			*{
				margin: 0rem;
				padding: 0rem;
			}
			.zth-dashboard-container{
				border: 0.0625rem solid;
				height: 100%;
			}
			.gross{
				width: 600px;
				height:500px; 
				margin-left: 50px;
				display:inline-block; 
			}
			.type{
				width: 550px;
				height:500px; 
				margin-left:80px;
				display:inline-block; 
			}
			
		</style>
</head>
<body>
	<div id="app" class="zth-dashboard-container">
		<div id="gross" class="gross" ></div>
		<div id="type"  class="type" ></div>
	</div>
	<script>
		
		new Vue({
			el:'#app',
			data(){
				return{
					datas:[]
				}
			},
			mounted:function(){
				this.sum(),
				this.types()
			},
			methods:{
				sum:function(){
					//获取表中所有数据总数
					axios.get('/ssb/publics/All').then(res=>{
						// 基于准备好的dom，初始化echarts实例
						var myChart = echarts.init(document.getElementById('gross'));
						
						  // 指定图表的配置项和数据
						        var option = {
									title:{
										text:'统计各表数据总数'
									},
									color: {
									    type: 'linear',
									    x: 0,
									    y: 0,
									    x2: 0,
									    y2: 1,
									    colorStops: [{
									        offset: 0, color: 'red' // 0% 处的颜色
									    }, {
									        offset: 1, color: 'green' // 100% 处的颜色
									    }],
									    global: false // 缺省为 false
									},
									tooltip:{},
									legend:{
										data:['数据总数']
									},
									xAxis:{
										data:['文章总数','类型总数','评论总数','标签总数','友情链接数量'],
									},
									yAxis:{},
									series: [{
									name: '数据总数',
									type: 'bar',
									data: res.data
									}]
								}
								 // 使用刚指定的配置项和数据显示图表。
								        myChart.setOption(option);
					},err=>{
						console.log(err);
					})
				},
				types:function(){
					//获取类型数量
					axios.get('/ssb/publics/typeSum').then(res=>{
						var o=res.data
						for(var i=0;i<o.length;i++){
							this.datas.push(o[i]);
							
						}
						//初始化图形报表对象
					 	var mainCharts=echarts.init(document.getElementById("type"));
					 	//报表参数对象
					 	var option={
					 		//标题
					 		title:{
					 			text:"各类型使用的数量"
					 		},
					 		//提示
				            tooltip: {},
				            //图例
				            legend: {
				            	padding:[30,0],
				            	left:'right'
				            },
				          	//系列列表
				            series:[{
				            	//类型，表示图形的类型 bar柱状图 line折线图 pie饼状图
				            	type:"pie",
				            	//饼的大小
				            	radius: "60%",
				            	//数据 和x轴或者y轴上的坐标数据对应
				            	data:[
				            		{name:o[0].category_name,value:o[2].typesum},
				            		{name:o[1].category_name,value:o[0].typesum},
				            		{name:o[2].category_name,value:o[1].typesum},
				            		{name:o[3].category_name,value:o[3].typesum},
				            		]
				            }]
					 	};
					 	//将参数对象设置给报表对象
					 	mainCharts.setOption(option);
					},err=>{
						console.log(err);
					});
					
					
				}
			}
			
		});
		
		
	</script>
</body>
</html>